<template>
	<view v-if="!hideLoad" class="page-size-ios" :style="{background: bgColor}">
		<!-- 默认加载 start -->
		<view v-if="model=='circle'">
			<u-loading-icon :color="anColor" :textColor="anColor" :text="text" vertical></u-loading-icon>
		</view>
		<!-- 默认加载 end -->
		
		<!-- 旋转刀片 start -->
		<view v-else-if="model=='blades'" class="blades">
			<view v-for="(item,index) in 5" :key="index" :style="{borderLeftColor: anColor}"></view>
		</view>
		<!-- 旋转刀片 end -->
	</view>
</template>

<script>
	export default {
		props: {
			hide: {
				default: false
			},
			text: {
				type: String,
				default: '加载中'
			},
			bgColor: {
				type: String,
				default: '#ffffff'
			},
			anColor: {
				type: String,
				default: '#909399'
			},
			model: {
				type: String,
				default: 'circle'
			}
		},
		computed: {
			hideLoad: function () {
				if(typeof(this.hide)!='object') return this.hide
				return Object.keys(this.hide).length
			}
		},
	}
</script>

<style scoped>
	.page-size-ios {
		position: fixed;
		top: 0;left: 0;
		z-index: 9000;
		display: grid;
		place-items: center;
	}
	
	/* 旋转刀片 start */
	.blades {
		animation: spin 1.4s infinite linear;
		height: 20px; width: 20px; 
	}
	.blades view {
	    border: 4px solid transparent;
	    width: 20px; height: 20px;
	    left: 50%; top: 50%;
	    position: absolute;
	    transform-origin: top left;
	}
	.blades view:nth-child(1) {
	    transform: rotate(72deg) translateY(5px);
	}
	.blades view:nth-child(2) {
	    transform: rotate(144deg) translateY(5px);
	}
	.blades view:nth-child(3) {
	    transform: rotate(216deg) translateY(5px);
	}
	.blades view:nth-child(4) {
	    transform: rotate(288deg) translateY(5px);
	}
	.blades view:nth-child(5) {
	    transform: rotate(360deg) translateY(5px);
	}
	@keyframes spin {
	  to { transform: rotate(360deg) }
	}
	/* 旋转刀片 end */
</style>